{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

    <meta charset="utf-8">
    <title>Fullscreen Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/supersized.css' %}">
    <link rel="stylesheet" href="{% static 'css/style-forget.css' %}">

    <style>

        .captcha1 > img {
            height: 40px;
            position: absolute;
            top: 96px;
            right: 5px;
        }

        .captcha1
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

</head>

<body>

<div class="page-container" style="margin-top: 60px;">
    <div style="margin-bottom: 60px;">
        <img src="{% static 'images/tim.jpeg' %}" alt="" style="width: 100px;height: 100px;">
        <h1>Python实战派</h1>
    </div>
    <br>
    <div id="pwd-content">
        <h1>忘记密码</h1>
        <form action="" method="post" id="forget_pwd_form">
            <div>
                <input type="text" name="email" class="email" placeholder="注册邮箱">
            </div>

            <div class="form-group captcha1">
                {{ forgetpwd_form.captcha }}
            </div>

            <button type="button" id="forgetPwdBtn">提交</button>
            <div class="error"><span>+</span></div>
            {% csrf_token %}
        </form>
        <div style="margin-top: 40px;">
            <a href="{% url 'index' %}" style="text-decoration: none;"><span style="font-size: 18px;font-weight: bold;">返回立即登录</span></a>
        </div>

    </div>

</div>


<!-- Javascript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/supersized.3.2.7.min.js' %}"></script>
<script src="{% static 'js/supersized-init.js' %}"></script>


<script>
    $(function () {
        $('.captcha1 input').attr('placeholder', '验证码');
    })
</script>

<script>
    $(function () {
        $('.captcha').css({
            'cursor': 'pointer'
        });
        // ajax 刷新
        $('.captcha').click(function () {
            console.log('click');
            $.getJSON("/captcha/refresh/",
                function (result) {
                    $('.captcha').attr('src', result['image_url']);
                    $('#id_captcha_0').val(result['key'])
                });
        });

    })
</script>

<!-- login -->
<script>
    $(function () {
        $('#forgetPwdBtn').on('click', function () {
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'forget_pwd' %}",
                data: $('#forget_pwd_form').serialize(),
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'success') {
                        alert("123" + data.emailLogin);
                        $('#pwd-content').html('<div>\n' +
                            '            <img src="{% static 'images/sendmail.png' %}" alt="">\n' +
                            '            <p style="margin-top: 15px;"><span style="font-size: 20px;font-weight: bold;">密码重设连接邮件发送成功</span></p>\n' +
                            '            <p style="margin-top: 5px;"><span style="font-size: 15px;">已发送至'+data.email+'</span></p>\n' +
                            '            <a href="http://'+data.emailLogin+'" target="_blank"><button type="button" id="forgetPwdBtn">去邮箱</button></a>\n' +
                            '        </div>');
                        //window.location.href="http://www.baidu.com";
                    } else if (data.status == 'fail') {
                        alert("提交错误");
                    }
                }
            })
        })
    })
</script>

</body>

</html>

